<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" >
                <div class="layui-card-body">

                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                        <ul class="layui-tab-title">
                            <li onclick="go('project_stage')"class="layui-this">施工阶段</li>
                            <!--<li onclick="go('project_add_stage')">新增阶段</li>-->
                        </ul>

                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">
                            <div class="layui-tab-item layui-show">
                                <div style="margin-top: 5px;margin-bottom: 10px">
                                    <div class="layui-inline" style="float: right">
                                        <form class="layui-form" action="">
                                            <div class="layui-form-item" style="margin-bottom: 0px">
                                                <div class="layui-inline" style="margin-right: 0px">
                                                    <label class="layui-form-label">项目</label>
                                                    <div class="layui-input-inline" style="width: 200px;">
                                                        <input type="text" name="keyword" autocomplete="off"
                                                               placeholder="姓名/手机号"
                                                               class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-inline" style="margin-right: 0px">
                                                    <label class="layui-form-label">阶段</label>
                                                    <div class="layui-input-block">
                                                        <select name="title">
                                                            <option value="">请选择一个进度</option>
                                                            <option value="水电工程">水电工程</option>
                                                            <option value="拆除工程">拆除工程</option>
                                                            <option value="瓦工工程">瓦工工程</option>
                                                            <option value="油工工程">油工工程</option>
                                                            <option value="木作安装">木作安装</option>
                                                            <option value="竣工保洁">竣工保洁</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="layui-inline" style="margin-right: 0px">
                                                    <label class="layui-form-label">工种</label>
                                                    <div class="layui-input-block">
                                                        <select name="type" >
                                                            <option value="">请选择工种</option>
                                                            <option value="拆除工">拆除工</option>
                                                            <option value="地板工">地板工</option>
                                                            <option value="水电工">水电工</option>
                                                            <option value="找平工">找平工</option>
                                                            <option value="安装工">安装工</option>
                                                            <option value="保洁工">保洁工</option>
                                                            <option value="木工">木工</option>
                                                            <option value="瓦工">瓦工</option>
                                                            <option value="吊顶工">吊顶工</option>
                                                            <option value="壁纸工">壁纸工</option>
                                                            <option value="辅助工">辅助工</option>
                                                            <option value="维修工">维修工</option>
                                                            <option value="木作工">木作工</option>
                                                            <option value="台面工">台面工</option>
                                                            <option value="油工">油工</option>
                                                            <option value="壁布工">壁布工</option>
                                                        </select>
                                                    </div>
                                                </div>



                                                <div class="layui-inline" style="margin-right: 0px">
                                                    <div class="layui-btn-group layui-inline" style="margin: 0px">
                                                        <!--此重置 仅仅是个跳转链接-->
                                                        <button  onclick="go('index')" class="layui-btn layui-btn-primary">重置</button>
                                                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">
                                                            <i class="layui-icon">&#xe615;</i>查找
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>


                                </div>
                                <div class="layadmin-trailer ">
                                    <table class="layui-table" lay-skin="line">

                                        <thead>
                                        <tr>
                                            <th>阶段</th>
                                            <th>户主</th>
                                            <th>项目经理</th>
                                            <th>时间</th>
                                            <th>工种</th>
                                            <th>工人</th>
                                            <th>材料订单</th>
                                            <th>施工日志</th>
                                            <th>验收管理</th>
                                            <th>状态</th>
                                            <th style="width: 20%"></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item,index) in items" :data_id="item.id">
                                            <td>
                                                <a href="#" ><b>{{item.title}}</b></a>
                                            </td>
                                            <td><span v-for="(it,i) in item.client" class="layui-btn layui-btn-sm layui-btn-normal">{{it.name}}</span></td>
                                            <td>{{item.pm}}</td>
                                            <td>{{item.start_time}}</td>
                                            <td><a href="#" onclick="workert_list(this)" style="color:#009688"
                                                   :data_id="item.id" :data_w="item.worker_type">查看</a></td>
                                            <td><a href="#" onclick="worker_list(this)" style="color:#009688"
                                                   :data_id="item.id">查看</a></td>
                                            <td><a href="#" onclick="material_list(this)" style="color:#009688"
                                                   :data_id="item.id">查看</a></td>
                                            <td><a href="#" onclick="log(this)" style="color:#009688" :data_id="item.id">查看</a></td>
                                            <td><a href="#" onclick="yanshou(this)" style="color:#009688" :data_id="item.id">查看</a> </td>
                                            <td v-if="item.status == 0">待发布</td>
                                            <td v-if="item.status == 1">竞标中</td>
                                            <td v-if="item.status == 2">施工中</td>
                                            <td v-if="item.status == 3">已完成</td>
                                            <td>

                                                <button class="layui-btn layui-btn-sm " style="display: block;margin-bottom: 5px"
                                                        @click="go(item.id)" :data_id="item.id"
                                                        :data_index="index">施工详情
                                                </button>

                                                <div class="layui-btn-group">
                                                    <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                            v-if="item.operate_item !='无'"
                                                            onclick="operate(this)" :data_id="item.id"
                                                            :data_index="index"
                                                            :data_op="item.operate_item">
                                                        {{item.operate_item}}
                                                    </button>
                                                    <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                            onclick="edit(this)" :data_id="item.id"
                                                            :data_index="index">编辑
                                                    </button>
                                                    <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                            onclick="del(this)" :data_id="item.id"
                                                            :data_index="index">删除
                                                    </button>
                                                </div>


                                            </td>

                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div id="demo7"></div>
                            </div>


                        </div>
                    </div>


                </div>


            </div>

        </div>


    </div>
</div>
<script>


    var app = new Vue({
        el: '#app',
        data: {
            items: [],
            curr: 1,//当前页
            limit: 8,//当前页数据个数
        },
        methods: {

            go: function (id) {
                location.href="stage_detail?id="+id;
            }

        },
    });


    function init() {
        layer.load(2);
        $.get('project_stage',{page: app.curr, limit: app.limit},function (res) {
            if(res.code!=1){
                return false;
            }
            layer.closeAll();
            app.items = res.data;
            app.items.forEach(function (item, index) {
                if (item.status == 0) {
                    Vue.set(item, 'operate_item', '无');
                }
                if (item.status == 1) {
                    Vue.set(item, 'operate_item', '结束竞标');
                }
                if (item.status == 2) {
                    Vue.set(item, 'operate_item', '完成');
                }
                if (item.status == 3) {
                    Vue.set(item, 'operate_item', '无');
                }
            });

        });



    }

    layui.use(['table','laypage', 'layer','form'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        //完整功能
        laypage.render({
            elem: 'demo7'
            , count: "{$count}"  //数据总数
            ,curr:1
            ,limit:8
            , limits: [8, 16]
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , jump: function (obj) {
                console.log(obj)
                app.curr = obj.curr;
                app.limit = obj.limit;
                init();

            }
        });
        form.on('submit(formDemo)', function (data) {

            if (!data.field.keyword||!data.field.type||!data.field.title) {
                return false;
            }
            console.log(data.field.keyword);
            console.log(data.field.type);
            console.log(data.field.title);
            layer.load(2);
            $.get("{:url('stage_search')}",{
                   data                },
                function (res) {

                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage;
                        //完整功能
                        laypage.render({
                            elem: 'demo7'
                            , count: res.total
                            , limits: [10, 20]
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                            , jump: function (obj) {
                                console.log(obj)
                                app.curr = obj.curr;
                                app.limit = obj.limit;
                                layer.load(2);
                                $.get("{:url('stage_search')}", {
                                        page: app.curr,
                                        limit: app.limit,
                                        keyword: data.field.keyword
                                    },
                                    function (res) {
                                        layer.closeAll();
                                        app.items= res.data;
                                        console.log(res.data);
                                    }
                                );
                            }
                        });
                    });
                }
            );
            return false;
        });

    });
    function del(that) {
        var data_id = $(that).attr('data_id');
        var data_index = $(that).attr('data_index');

        var index = layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("del_stage")}', {id: data_id}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1})
                    app.items.splice(data_index, 1);
                }
                layer.close(index);
            });
        }, function () {
            layer.close(index);
        });
    }
    function edit(that) {
        //项目id，为了从编辑返回
        var id = "{$Request.param.id}";
        //阶段id
        var data_id = $(that).attr('data_id');
        var path = "{:url('edit_stage')}?id=" + data_id + "&pid=" + id;
        go(path);
    }
    function material_list(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '材料',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('select_material_list')}?id=" + data_id
        });
    }
    function workert_list(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '工种',
            shadeClose: true,
            shade: 0.01,
            area: ['50%', '50%'],
            content: "{:url('worker_type_list')}?id=" + data_id
        });
    }
    function worker_list(that) {
        var data_id = $(that).attr('data_id');
        // console.log("cn"+data_id);
        layer.open({
            type: 2,
            title: '工人',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('project_worker')}?id=" + data_id
        });
    }
    function operate(that) {
        var status = 0;
        var data_id = $(that).attr('data_id');
        var data_op = $(that).attr('data_op');
        if (data_op == "发布") {
            status = 1;
        }
        if (data_op == "结束竞标") {
            status = 2;
        }
        if (data_op == "完成") {
            status = 3;
        }
        var index = layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("stage_status")}', {id: data_id, status: status}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    location.reload();
                }
                layer.close(index);
            });
        }, function () {
            layer.close(index);
        });
    }
    function log(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '施工日志',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('stage_log')}?id=" + data_id
        });
    }

    //图片预览
    function checkTuzhi(that) {
        var ph=$(that).find('.layui-upload-img').attr('data_src');
        var json={
            "title": "", //相册标题
            "id": 123, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": [   //相册包含的图片，数组格式
                {
                    "alt": "图片名",
                    "pid": 666, //图片id
                    "src": ph, //原图地址
                    "thumb": ph //缩略图地址
                }
            ]
        }
        layer.photos({
            photos: json
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });

    }

    function yanshou(that) {
        var data_id = $(that).attr('data_id');
        console.log(data_id);
        layer.open({
            type: 2,
            title: '验收管理',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('yanshou')}?id=" + data_id
        });
    }

</script>
</body>
</html>




